import React from 'react';
import {Text, View, Image, TouchableWithoutFeedback} from 'react-native';
import PropTypes from 'prop-types';
import Ionicons from "react-native-vector-icons/Ionicons";

export default function TitleDetailView(props) {
    return <TouchableWithoutFeedback onPress={props.onPress} disabled={!props.onPress}><View
        style={[{flexDirection: 'row', alignItems: 'center', borderBottomWidth: props.bottomSeparator?0.5:0, borderBottomColor: '#EEEEEE'}, props.containerStyle]}>
        <Text style={[{
            fontSize: 14,
            color: '#666',
            marginVertical: 15,
            marginLeft: 15,
            width: props.titleWidth || 90
        }, props.titleStyle]}>{props.title}</Text>
        {props.detailComponent ? props.detailComponent: <Text style={{flex: 1, color: '#333', fontSize: 13, marginRight: 15, marginLeft:10, ...props.detailStyle}} {...props.detailProps}>{props.detail}</Text>}
        {props.accessory ? props.accessory : null}
        {props.accessoryIndicator ? <Ionicons name={'ios-arrow-forward'} size={20} color={'#BCBCBC'} style={{marginHorizontal:15, alignSelf:'center'}}/>: null}
    </View></TouchableWithoutFeedback>
}

TitleDetailView.propTypes = {
    containerStyle: PropTypes.object,
    title: PropTypes.string.isRequired,
    detail: PropTypes.string.isRequired,
    detailComponent: PropTypes.object,
    titleStyle: PropTypes.object,
    detailStyle: PropTypes.object,
    detailProps: PropTypes.object,
    titleWidth: PropTypes.number,
    bottomSeparator: PropTypes.bool,
    accessoryIndicator: PropTypes.bool,
    accessory: PropTypes.object,
    onPress: PropTypes.func
};

TitleDetailView.defaultProps = {
    titleWidth: 90,
    bottomSeparator: true,
};

